import React from 'react'
import MUtil from 'util/mm.jsx'
import User from 'service/user-service.jsx'
import './nav-top.css'

let _Ajax = new MUtil()
let _User = new User()

class NavTop extends React.Component{
  constructor(props) {
    super(props)
    this.state= {
      username: _Ajax.getUserInfo('userInfo').username || ''
    }
  }

  loginEvent(e) {
    window.location.href='/login'
  }

  //  推出登陆
  logoutEvent (e) {
    _User.logout().then((res)=>{
      _Ajax.removeUserInfo('userInfo')
      window.location.href= '/login'
    }, (err)=>{})

  }

  render () {
    return(
     <nav className="navbar navbar-inverse navbar-fixed-top">
      <div className="container-fluid">
        <div className="navbar-header">
          <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span className="sr-only">Toggle navigation</span>
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
          </button>
          <a className="navbar-brand" href="#">happy mall</a>
        </div>
        <div id="navbar" className="navbar-collapse collapse">
          <div className="nav navbar-nav navbar-right">
            {
              this.state.username ?
              <div className="btn-group">
                <button type="button" className="btn btn-primary">欢迎vip用户 <span>{this.state.username}</span></button>
                <ul className="dropdown-menu">
                  <li><a href="javascript:;" onClick={e=> this.logoutEvent(e)}>注销</a></li>
                </ul>
              </div> :
              <div className="btn-group">
                <button className="btn btn-default" onClick={e=>this.loginEvent(e)}>登陆</button>
              </div>
            }
            
          </div>
        </div>
      </div>
    </nav>
    )
  }
}

export default NavTop


